<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>菜品类型管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./static/js/xadmin.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">菜品管理</a>
        <a>
          <cite>菜品类型管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<form class="layui-form" action="" style="margin: 200px 200px" onsubmit="return false">

    <div class="layui-form-item" style="margin-top: 30px">
        <label class="layui-form-label">菜品类型：</label>
        <div class="layui-input-block" id="allFoodType">

        </div>
    </div>

    <div class="layui-form-item" style="margin-top: 30px">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button class="layui-btn layui-btn-warm" onclick="x_admin_show('添加菜品类型','${pageContext.request.contextPath}/food?m=addTypePage',300,500)">添加类型</button>
            <button id="selectAll" type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="demo3">全不选</button>
            <button type="submit" class="layui-btn layui-btn-danger" lay-submit="" lay-filter="demo2">删除</button>
        </div>
    </div>
</form>

<script>
    var first = true;
    layui.use(['form'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;


        //  获取所有菜品类型数据
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/food?m=getAllFoodType",
            dataType: "json",
            success: function (data) {
                if (data.code === 200) {
                    $("#allFoodType").empty();
                    var count = 0;
                    $(data.data).each(function () {
                        count = count + 1;
                        if(this.foodTypeStatus == 1){
                            $("#allFoodType").append('<input type="checkbox" class="foodTypeInput" checked="true" id="foodTypeId' + this.foodTypeId + '" name="foodTypeId' + this.foodTypeId + '" value="' + this.foodTypeId + '" title="' + this.foodTypeName + '">');
                        }else {
                            $("#allFoodType").append('<input type="checkbox" class="foodTypeInput"  id="foodTypeId' + this.foodTypeId + '" name="foodTypeId' + this.foodTypeId + '" value="' + this.foodTypeId + '" title="' + this.foodTypeName + '">');
                        }
                        if (count === 5) {
                            $("#allFoodType").append('<br><br>');
                            count = 0;
                        }
                    });
                    // 重新渲染
                    form.render('checkbox');
                }
            }
        });

        //监听提交
        form.on('submit(demo1)', function (data1) {
            layer.confirm('确认提交吗?', function (data) {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/food?m=editFoodType",
                    dataType: "json",
                    data: data1.field,
                    success: function (jsonData) {
                        layer.msg(jsonData.msg, function () {
                            if (jsonData.code === 200) {
                                layer.close(data);
                                location.replace(location.href);
                            }
                        });

                    }
                });
            });
        });

        //监听全选
        form.on('submit(demo3)', function () {
           selectAllFunc();
        });

        function selectAllFunc(){
            if (first){
                $('#selectAll').text("全选");
                $("input + div").attr("class", "layui-unselect layui-form-checkbox");
                $("input").attr("checked", false);
                first = false;
            }else {
                $('#selectAll').text("全不选");
                $("input + div").attr("class", "layui-unselect layui-form-checkbox layui-form-checked");
                $("input").attr("checked", true);
                first = true;
            }
        }

        //监听删除
        form.on('submit(demo2)', function (data1) {
            layer.confirm('确认删除吗?', function (data) {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/food?m=deleteFoodType",
                    dataType: "json",
                    data: data1.field,
                    success: function (jsonData) {
                        layer.msg(jsonData.msg, function () {
                            if (jsonData.code === 200) {
                                layer.close(data);
                                location.replace(location.href);
                            }
                        });

                    }
                });
            });
        });

    });


</script>

</body>
</html>